var t = require("../../../../../ec-canvas/echarts");

getApp();

Component({
    properties: {
        port: {
            type: Array,
            value: function() {
                return [];
            }
        }
    },
    data: {
        eChartData: [],
        defaultData: [ {
            name: "Wap",
            people: 0,
            total: 0
        }, {
            name: "公众号",
            people: 0,
            total: 0
        }, {
            name: "小程序",
            people: 0,
            total: 0
        }, {
            name: "APP",
            people: 0,
            total: 0
        }, {
            name: "PC",
            people: 0,
            total: 0
        } ],
        ecIncome: {
            lazyLoad: !1
        }
    },
    lifetimes: {
        attached: function() {}
    },
    observers: {
        port: function(t) {
            this.setECharts();
        }
    },
    methods: {
        setECharts: function() {
            this.initData(), this.initBarECHarts(), this.initPieECharts();
        },
        initPieECharts: function() {
            var e = this.selectComponent("#pie-port-chart"), a = {
                title: {
                    bottom: "3%",
                    right: "20%",
                    text: "访问人数",
                    textStyle: {
                        color: "#a7b7c7",
                        fontSize: 14,
                        fontWeight: "bold"
                    }
                },
                legend: {
                    type: "plain",
                    orient: "vertical",
                    x: "5%",
                    y: "center"
                },
                series: [ {
                    type: "pie",
                    center: [ "70%", "50%" ],
                    radius: [ "40%", "70%" ],
                    avoidLabelOverlap: !1,
                    minAngle: 15,
                    startAngle: 270,
                    label: {
                        show: !1,
                        position: "center",
                        formatter: "{style1|{b}}\n{style2|{c} 人}",
                        rich: {
                            style1: {
                                fontSize: 12,
                                fontWeight: "bold"
                            },
                            style2: {
                                fontSize: 10,
                                color: "#999"
                            }
                        },
                        emphasis: {
                            show: !0
                        }
                    },
                    labelLine: {
                        show: !1
                    },
                    emphasis: {
                        label: {
                            show: !0,
                            fontSize: "12",
                            fontWeight: "bold"
                        }
                    },
                    data: []
                } ]
            }, i = {
                Wap: "#f17953",
                "公众号": "#5d76e4",
                "小程序": "#33c6fd",
                APP: "#fdb43a",
                PC: "#51c186"
            };
            a.series[0].data = this.data.eChartData.map(function(t) {
                return {
                    name: t.name,
                    value: t.people,
                    itemStyle: {
                        color: i[t.name]
                    }
                };
            }), a.legend.formatter = function(t) {
                var e = a.series[0].data.find(function(e) {
                    return e.name == t;
                });
                return "".concat(t, ": ").concat(e.value);
            }, e.init(function(e, i, o) {
                var n = t.init(e, null, {
                    width: i,
                    height: o
                });
                return n.setOption(a), n;
            });
        },
        initBarECHarts: function() {
            var e = this.selectComponent("#bar-port-chart"), a = {
                title: {
                    top: "6%",
                    left: "5%",
                    text: "端口访问",
                    subtext: "{b_title|访问次数}",
                    textStyle: {
                        color: "#0a0a14",
                        fontWeight: "bold"
                    },
                    subtextStyle: {
                        rich: {
                            b_title: {
                                color: "#a7b7c7",
                                fontSize: 14,
                                fontWeight: "bold",
                                padding: [ 3, 4, 5, 125 ]
                            }
                        }
                    }
                },
                grid: {
                    top: "35%",
                    left: "5%",
                    right: "5%",
                    bottom: "5%",
                    containLabel: !0
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985"
                        }
                    }
                },
                xAxis: {
                    axisTick: {
                        show: !1
                    },
                    axisLine: {
                        onZero: !1,
                        lineStyle: {
                            color: "rgb(208,208,208)",
                            width: 1
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        color: "rgb(108,108,108)"
                    },
                    type: "category"
                },
                yAxis: [ {
                    type: "value",
                    min: 3,
                    minInterval: 1,
                    axisLine: {
                        show: !1
                    },
                    axisTick: {
                        show: !1
                    },
                    splitLine: {
                        lineStyle: {
                            type: "dashed"
                        }
                    }
                } ],
                dataset: {},
                series: [ {
                    type: "bar",
                    symbol: "circle",
                    symbolSize: 8,
                    barWidth: 20,
                    itemStyle: {
                        color: "rgb(24,144,255)"
                    }
                } ]
            };
            a.dataset.dimensions = [ "name", "total" ], a.dataset.source = this.data.eChartData, 
            e.init(function(e, i, o) {
                var n = t.init(e, null, {
                    width: i,
                    height: o
                });
                return n.setOption(a), n;
            });
        },
        initData: function() {
            this.data.port && this.data.port.length > 0 ? this.data.eChartData = this.data.port : this.data.eChartData = this.data.defaultData;
        }
    }
});